<template>
    <content>
        <div class="swiper-container lunbo">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <section>
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss1.png"></div>
                                    <div class="Daisy">
                                        <span>亮蓝Daisy</span>
                                        <span>27分钟</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ss2.png">
                                </div>
                            </div>
                            <div class="two">
                                <div class="dayi">
                                    <span class="dd">#&nbsp;大&nbsp;衣&nbsp;#</span>
                                    <span class="bb">大衣</span>
                                </div>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList">
                                    <li><img src="../../assets/img/ss3.png"></li>
                                    <li><img src="../../assets/img/ss4.png"></li>
                                    <li><img src="../../assets/img/ss4.png"></li>
                                    <li><img src="../../assets/img/ss3.png"></li>
                                    <li><img src="../../assets/img/ss4.png"></li>
                                    <li><img src="../../assets/img/ss3.png"></li>
                                    <li><img src="../../assets/img/ss4.png"></li>
                                    <li><img src="../../assets/img/ss3.png"></li>
                                    <li><img src="../../assets/img/ss4.png"></li>
                                </ul>
                            </div>
                            <!--优购物车图标-->
                            <div class="three">
                                <div class="three_l">
                                    <img src="../../assets/img/shopgo.png">
                                    <span>搭配一件商品</span>
                                </div>
                                <div class="three_r">
                                    <img src="../../assets/img/ss5.png">
                                    <span>评论</span>
                                    <img src="../../assets/img/ss6.png">
                                    <span>1</span>
                                </div>
                            </div>
                        </div>
                        <!--二-->
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss7.png"></div>
                                    <div class="Daisy">
                                        <span>TUBABIY</span>
                                        <span>今天17:05</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ss8.png">
                                </div>
                            </div>
                            <!--双十一-->
                            <div class="shiyi">
                                <span>双十一新品，全部低价哦，赶紧买买买~</span>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList">
                                    <li><img src="../../assets/img/ssq.png"></li>
                                    <li><img src="../../assets/img/ssw.png"></li>
                                    <li><img src="../../assets/img/ssq.png"></li>
                                    <li><img src="../../assets/img/ssw.png"></li>
                                    <li><img src="../../assets/img/ssq.png"></li>
                                    <li><img src="../../assets/img/ssw.png"></li>
                                    <li><img src="../../assets/img/ssq.png"></li>
                                    <li><img src="../../assets/img/ssw.png"></li>
                                    <li><img src="../../assets/img/ssq.png"></li>
                                </ul>
                            </div>
                            <!--优购物车图标-->
                            <div class="three">
                                <div class="three_l">
                                    <img src="../../assets/img/shopgo.png">
                                    <span>搭配一件商品</span>
                                </div>
                                <div class="three_r">
                                    <img src="../../assets/img/ss5.png">
                                    <span>评论</span>
                                    <img src="../../assets/img/ss6.png">
                                    <span>1</span>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="swiper-slide">
                    <section>
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss1.png"></div>
                                    <div class="Daisy">
                                        <span>敛信然Yvette</span>
                                        <span>燕儿家</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ss2.png">
                                </div>
                            </div>
                            <div class="two">
                                <div class="quiery">
                                    <span>质量好&nbsp;服务态度好&nbsp;穿着很美&nbsp;感觉萌萌的，以后还会再来&nbsp;没有让我失望</span>

                                </div>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList">
                                    <li><img src="../../assets/img/ww1.png"></li>
                                    <li><img src="../../assets/img/ww2.png"></li>
                                    <li><img src="../../assets/img/jewelry.webp"></li>
                                </ul>
                            </div>
                            <!--优购物车图标-->
                            <div class="three">
                                <div class="three_l yijia">
                                    <img src="../../assets/img/ww4.png">
                                    <span>买家秀</span>
                                </div>
                                <div class="three_r">
                                    <img src="../../assets/img/ss5.png">
                                    <span>评论</span>
                                    <img src="../../assets/img/ss6.png">
                                    <span>赞</span>
                                </div>
                            </div>
                        </div>
                        <!--二-->
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss7.png"></div>
                                    <div class="Daisy">
                                        <span>星梓瑶盈秀</span>
                                        <span>燕儿家</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ss8.png">
                                </div>
                            </div>
                            <!--双十一-->
                            <div class="two">
                                <div class="quiery">
                                    <span>质量好&nbsp;服务态度好&nbsp;穿着很美&nbsp;感觉萌萌的，以后还会再来&nbsp;没有让我失望</span>

                                </div>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList">
                                    <li><img src="../../assets/img/ww5.png"></li>
                                    <li><img src="../../assets/img/ww6.png"></li>
                                    <li><img src="../../assets/img/ww5.png"></li>
                                </ul>
                            </div>
                            <!--优购物车图标-->
                            <div class="three">
                                <div class="three_l yijia">
                                    <img src="../../assets/img/ww4.png">
                                    <span>买家秀</span>
                                </div>
                                <div class="three_r">
                                    <img src="../../assets/img/ss5.png">
                                    <span>评论</span>
                                    <img src="../../assets/img/ss6.png">
                                    <span>赞</span>
                                </div>
                            </div>
                        </div>
                        <!--三-->
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss1.png"></div>
                                    <div class="Daisy">
                                        <span>敛信然Yvette</span>
                                        <span>燕儿家</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ss2.png">
                                </div>
                            </div>
                            <div class="two">
                                <div class="quiery">
                                    <span>质量好&nbsp;服务态度好&nbsp;穿着很美&nbsp;感觉萌萌的，以后还会再来&nbsp;没有让我失望</span>

                                </div>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList">
                                    <li><img src="../../assets/img/ww1.png"></li>
                                    <li><img src="../../assets/img/ww2.png"></li>
                                    <li><img src="../../assets/img/jewelry.webp"></li>
                                </ul>
                            </div>
                            <!--优购物车图标-->
                            <div class="three">
                                <div class="three_l yijia">
                                    <img src="../../assets/img/ww4.png">
                                    <span>买家秀</span>
                                </div>
                                <div class="three_r">
                                    <img src="../../assets/img/ss5.png">
                                    <span>评论</span>
                                    <img src="../../assets/img/ss6.png">
                                    <span>赞</span>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="swiper-slide">
                    <section>
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss1.png"></div>
                                    <div class="Daisy">
                                        <span>娇娇_wyd</span>
                                        <span>今天9:07</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ww14.png">
                                </div>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList vudio">
                                    <li>小清新范啊，你来不来</li>
                                    <li><img src="../../assets/img/ww11.png"></li>
                                </ul>
                            </div>
                        </div>
                        <!--二-->
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss7.png"></div>
                                    <div class="Daisy">
                                        <span>ZLNA岚哥</span>
                                        <span>今天10:37</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ww14.png">
                                </div>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList vudio">
                                    <li>高端货地摊价全天秒</li>
                                    <li><img src="../../assets/img/ww12.png"></li>
                                </ul>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="swiper-slide">
                    <section>
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss1.png"></div>
                                    <div class="Daisy">
                                        <span>西西小可旗舰店</span>
                                        <span>前天9:07</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ww14.png">
                                </div>
                            </div>
                            <div class="two">
                                <div class="dayi">
                                    <span class="dd">#&nbsp;双十一购物节&nbsp;#</span>
                                    <span id="qiang">抢购靠打拼，爱拼的你准备好了吗！<br/>点击首页赶紧围观购物攻略</span>
                                </div>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList">
                                    <!--<li v-for="n in imglist"><img :src="n.img"></li>-->
                                    <li><img src="../../assets/img/ww16.png"></li>
                                    <li><img src="../../assets/img/ww17.png"></li>
                                    <li><img src="../../assets/img/ww16.png"></li>
                                    <li><img src="../../assets/img/ww16.png"></li>
                                    <li><img src="../../assets/img/ww17.png"></li>
                                </ul>
                            </div>
                            <!--优购物车图标-->
                            <div class="three">
                                <div class="three_l yijia">
                                    <img src="../../assets/img/ww4.png">
                                    <span>买家秀</span>
                                </div>
                                <div class="three_r">
                                    <img src="../../assets/img/ss5.png">
                                    <span>评论</span>
                                    <img src="../../assets/img/ss6.png">
                                    <span>赞</span>
                                </div>
                            </div>
                        </div>
                        <!--二-->
                        <div class="stateList">
                            <div class="first">
                                <div class="first_l">
                                    <div><img src="../../assets/img/ss1.png"></div>
                                    <div class="Daisy">
                                        <span>西西小可旗舰店</span>
                                        <span>前天9:07</span>
                                    </div>
                                </div>
                                <div class="first_r">
                                    <img src="../../assets/img/ww14.png">
                                </div>
                            </div>
                            <div class="two">
                                <div class="dayi">
                                    <span class="dd">#&nbsp;双十一购物节&nbsp;#</span>
                                    <span id="qiang">抢购靠打拼，爱拼的你准备好了吗！<br/>点击首页赶紧围观购物攻略</span>
                                </div>
                            </div>
                            <!--图片-->
                            <div class="photo">
                                <ul class="photoList">
                                    <li><img src="../../assets/img/ww16.png"></li>
                                    <li><img src="../../assets/img/ww17.png"></li>
                                    <li><img src="../../assets/img/ww16.png"></li>
                                    <li><img src="../../assets/img/ww16.png"></li>
                                    <li><img src="../../assets/img/ww17.png"></li>
                                </ul>
                            </div>
                            <!--优购物车图标-->
                            <div class="three">
                                <div class="three_l yijia">
                                    <img src="../../assets/img/ww4.png">
                                    <span>买家秀</span>
                                </div>
                                <div class="three_r">
                                    <img src="../../assets/img/ss5.png">
                                    <span>评论</span>
                                    <img src="../../assets/img/ss6.png">
                                    <span>赞</span>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </content>
</template>

<script type="text/ecmascript-6">
    export default {
        mounted:()=> {
            new Swiper('.lunbo', {
                direction: 'horizontal',
                autoHeight: true,
                onSlideChangeStart: function (e) {
                    var index = e.activeIndex;
                    $(".bottom a").eq(index).addClass("active").siblings().removeClass("active");

                }
            })
        }
    }
</script>

<style>
    content{
        width: 100%;
        flex: 1;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    section{
        background: white;
        padding: 0.15rem 0;
    }
    .first{
        display: flex;
        font-size: 14px;
        justify-content: space-around;
    }
    .first_l{
        display: flex;
    }
    .Daisy{
        display: flex;
        flex-direction: column;
        line-height: 0.3rem;
        margin-left: 0.1rem;
    }
    .Daisy span:first-child{
        font-weight: 600;
        font-size: 18px;
        color: #323232;
    }
    .Daisy span:last-child{
        color: #a5a5a5;
    }

    .dayi{
        display: flex;
        font-size: 18px;
        padding-left: 0.8rem;
        flex-direction: column;
        font-weight: 600;
        line-height: 0.4rem;
    }
    .dayi .dd{
        color: #FF5573;
        font-size: 20px;
    }
    .dayi .bb{
        display: inline-block;
        color: #9C9A9C;
        width: 1rem;
        height: 0.4rem;
        border-radius: 3px;
        background: #f8f3f9;
        text-align: center;
        line-height: 0.4rem;
    }
    .photo{
        width: 100%;
        overflow: hidden;
        margin-top: 0.2rem;
    }
    .photoList{
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
        margin-left: 0.6rem;
    }
    .photoList li{
        width: 30%;
        float: left;
        display: flex;
    }
    .photoList li img{
        width: 100%;
        height:100%;
    }
    .three{
        width: 100%;
        display: flex;
        font-size: 20px;
        justify-content: space-around;
        margin-top: 0.2rem;
        color: #6f6f6f;
    }
    .three_l{
        display: flex;
    }
    .three_r{
        display: flex;
    }
    .three img{
        width: 0.2rem;
        height: 0.2rem;
        margin-top: 0.04rem;
        margin-right: 0.05rem;
    }
    .stateList{
        width: 100%;
        border-bottom:1px solid #efefef ;
        padding:0.2rem 0;
    }
    .shiyi{
        color: #333333;
        font-size: 18px;
        font-weight: 600;
        margin-left: 0.3rem;
    }
    .two{
        margin-left: 0.2rem;
    }
    .two .quiery{
        color: #313431;
        font-size: 16px;
        font-weight: 100;
    }
    .three .yijia img{
        width: 0.3rem;
        height: 0.3rem;
        vertical-align: middle;
    }
    .vudio li{
        width: 60%;
        font-size: 18px;
        margin-left:0.5rem;
    }
    .vudio li:first-child{
        margin-bottom: 0.2rem;
    }
    #qiang{
        display: inline-block;
        color: #313131;
        font-size: 16px;
        border-radius: 3px;
        text-align: center;
        line-height: 0.4rem;
        margin-left: -0.3rem;
    }

</style>